<template>
	<div class="contant">
		<div class="content">
			<div class="zhanghuTitle">
				{{ $t('我的账户') }}<span id="">（{{userInfo.email}}）</span>
			</div>
			<div class="zhanghuInfo">
				<div class="zhanghuInfotop">
					<div class="zhanghuInfoIt">
						<p>{{ $t('账户总资产') }} CNH</p>
						<p>{{ total }}</p>
					</div>
					<div class="zhanghuInfoIt">
						<p>{{ $t('折合') }} USDT</p>
						<p>{{ zh_usdt }}</p>
					</div>
					<!-- <div class="shuaxin">
						{{ $t('刷新') }}
					</div> -->
					<div class="eyeBox">
						<img src="../../assets/images/newImg/icon_eye.png" alt="" @click="encryptText">
					</div>
				</div>
				<div class="zhanghuInfotop zhanghuInfotopTow">
					<div class="zhanghuInfoIt">
						<p>{{ $t('账户盈亏') }}</p>
						<p>
							<!-- {{ getContext((0)) }} -->
							  {{ total_shouyi }}
						</p>
					</div>
					<div class="zhanghuInfoIt">
						<p>{{ $t('持仓金额') }}</p>
						<p>{{ jmoney }}</p>
					</div>
					<div class="zhanghuInfoItii">
						<p>{{ $t('可用资金') }}</p>
						<!-- <p>{{ getContext((0.00).toFixed(2)) }}</p> -->
						<p>{{ usea }}</p>
					</div>
				</div>
			</div>
			<div class="navBox">
				<div class="navBoxit" v-for="(it,index) in navTiList" :key="index" @click="goNextPage(it)">
					<img :src="it.guojiaImg" alt="">
					{{it.label}}
				</div>
			</div>
			<div class="navTowBox">
				<div class="navTowit" :class="{navTowitTow:isNavItShow==0}" @click="getNavIt(0)">
					{{ $t('持仓明细') }}
				</div>
				<div class="navTowit" :class="{navTowitTow:isNavItShow==1}" @click="getNavIt(1)">
					{{ $t('历史明细') }}
				</div>
			</div>
			<div class="shujuList">
				<div class="chilanglist" v-if="isNavItShow==0">
					<van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad">
						<div class="onebox" v-for="(item, index) in jiaoyiList" :key="index">
							<div class="time">
								{{ $t("剩余时间") }}<van-count-down :time="item.chazhi" />
							</div>

							<div class="name">{{ item.bi_name }}</div>
							<div class="tab">
								<div :class="item.type == 1 ? 'duo' : 'kong'">
									{{ item.type == 1 ? $t("买多") : $t("买空") }}
								</div>
								<div class="num">
									<span class="linename">{{ $t("金额") }}</span>:{{ item.money }}
								</div>
							</div>
							<div class="aline">
								<div class="linename">
									{{ $t("买入价") }}:{{ item.start_money }}
								</div>
								<!-- <div class="linename">{{$t('合约盈亏')}}</div -->
							</div>
							<!-- <div class="aline">
				  <div class="linename">{{$t('卖出价')}}:{{ item.end_money }}</div>
				  <div class="zhang">{{item.win_money}}</div>
				  <div class="kui">-3.00</div> 
				</div> -->
							<div class="aline">
								<div class="linename">
									{{ $t("买入时间") }}:{{ getdate(item.addtime) }}
								</div>
							</div>
							<div class="aline">
								<div class="linename">
									{{ $t("订单时长") }}:{{ item.hold_time }}s
								</div>
							</div>
						</div>
					</van-list>
				</div>
				<div class="chilanglist" v-if="isNavItShow==1">
					<van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad">
						<div class="onebox" v-for="(item, index) in jiaoyiList" :key="index">
							<div class="name">{{ item.bi_name }}</div>
							<div class="tab">
								<div :class="item.type == 1 ? 'duo' : 'kong'">
									{{ item.type == 1 ? $t("买多") : $t("买空") }}
								</div>
								<div class="num"><span class="linename">{{ $t("金额") }}</span>:{{ item.money }}</div>
							</div>
							<div class="aline">
								<div class="linename">
									{{ $t("买入价") }}:{{ item.start_money }}
								</div>
								<div class="linename">{{ $t("盈亏") }}</div>
							</div>
							<div class="aline">
								<div class="linename">
									{{ $t("卖出价") }}:{{ item.end_money }}
								</div>
								<div :class="item.win_money > 0 ? 'zhang duo' : 'zhang kui'">{{ item.win_money }}
								</div>
								<!-- <div class="kui">-3.00</div> -->
							</div>
							<div class="aline">
								<div class="linename">
									{{ $t("订单时长") }}:{{ item.hold_time }}s
								</div>
							</div>
							<div class="aline">
								<div class="linename">
									{{ $t("买入时间") }}:{{ getdate(item.addtime) }}
								</div>
							</div>
						</div>
					</van-list>
				</div>
			</div>
		</div>
		<tabBar :active="2"></tabBar>
	</div>
</template>

<script>
	import tabBar from '@/components/tabBar.vue';
	import {
		EventBus
	} from '@/utils/event-bus';
	export default {
		name: 'quotes',
		components: {
			tabBar
		},
		data() {
			return {
				total:0,
				zh_usdt:0,
				futures: [],
				active: 1,
				// 币种列表
				symbolsArray: [],
				tabList01: [],
				ch: {}, // 实时数据
				sort: true, // 是否排序
				tabList: [this.$t('自选'), this.$t('期货')],
				navTiList: [{
						label: this.$t("充值记录"),
						guojiaImg: require('../../assets/images/newImg/ch6.png'),
						path: '/rechargeDetails',
					},
					{
						label: this.$t("充值"),
						guojiaImg: require('../../assets/images/newImg/ch5.png'),
						path: '/recharge',
					}, {
						label: this.$t("提现"),
						guojiaImg: require('../../assets/images/newImg/ch4.png'),
						path: '/withdrawal',
					}, {
						label: this.$t("提现记录"),
						guojiaImg: require('../../assets/images/newImg/ch4.png'),
						path: '/withdrawalDetails',
					}, {
						label: this.$t("账单"),
						guojiaImg: require('../../assets/images/newImg/ch2.png'),
						path: '/zhangbian',
					}, {
						label: this.$t("客服"),
						guojiaImg: require('../../assets/images/newImg/ch1.png'),
						path: '/onlineService',
					}
				],
				isNavItShow: 0,
				encrypt: false,

				// 列表
				page: 0,
				jiaoyiList: [],
				loading: false,
				finished: false,
				usea:0,
				userInfo:{},
				today_shouyi:0,
				total_shouyi:0,
				jmoney:0
			};
		},
		created() {
			this.$nextTick(async () => {
				this.symbolsArray = await this.initMarketInfo();
				this.init()
				// this.$socket.on('sub.futures.list@global', this.revData)
			});
		},
		mounted() {
			this.onLoadPageList()
			this.getzichanlist()
		},

		methods: {
			init() {
				$postAxios(api.getUserInfo, {}, (res) => {

					if (res.code == 0) {
						this.userInfo = res.data;
					} else {
						this.$toast(this.$t(res.msg));
					}
				});
			},
			onLoad(){

			},
			getzichanlist() {
				$postAxios(api.getAssets, {}, (res) => {
					// this.zichanlist = res.data;
					this.total = res.total;
					this.zh_usdt=res.zh_usdt
					// this.today_shouyi = res.today_shouyi;
					this.total_shouyi = res.total_shouyi;
					this.usea = res.use;
					// this.mining_money = res.mining_money;
					// this.chlid = res.chlid
					// this.chlid_today_mining_money = res.chlid_today_mining_money
					// this.chlid_total_mining_money = res.chlid_total_mining_money
					this.jmoney = res.jmoney;
				});
			},
			// 新
			getNavIt(num) {
				this.isNavItShow = num;
				this.page = 0;
				this.jiaoyiList = [];
				this.onLoadPageList();
			},
			encryptText() {
				this.encrypt = !this.encrypt;
				this.$forceUpdate();
			},
			getContext(text) {
				if (!this.encrypt) return text;
				if (typeof text != "string") {
					text = "" + text;
				}
				const times = text.split("").length;
				return "*".repeat(times);
			},
			goNextPage(item) {
				this.$router.push(item.path);
			},
			//时间戳转日期
			getdate(nS) {
				//var offset = 	new Date().getTimezoneOffset() / 60 + 1;
				//console.log(offset);
				//var date = new Date(nS*1000 + offset * 3600  * 1000);  //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var date = new Date(nS * 1000);
				var year = date.getFullYear(),
					month = ("0" + (date.getMonth() + 1)).slice(-2),
					sdate = ("0" + date.getDate()).slice(-2),
					hour = ("0" + date.getHours()).slice(-2),
					minute = ("0" + date.getMinutes()).slice(-2),
					second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result =
					year +
					"-" +
					month +
					"-" +
					sdate +
					" " +
					hour +
					":" +
					minute +
					":" +
					second;
				// 返回
				return result;
			},
			onLoadPageList() {
				var that = this;
				$postAxios(
					api.getUserSpeedOrderList, {
						status: this.isNavItShow + 1,
						page: this.page,
						rows: 30,
					},
					(res) => {
						if (res.code == 0) {
							if (res.data.length) {
								if (that.page === 0) {
									// that.jiaoyiList = res.data;
									let data = res.data;
									data.forEach(function(v, i) {
										data[i]["chazhi"] = v.cha * 1000;
									});
									that.jiaoyiList = that.jiaoyiList.concat(data);
									console.log(that.jiaoyiList);
								} else {
									let data = res.data;
									data.forEach(function(v, i) {
										data[i]["chazhi"] = v.cha * 1000;
									});
									that.jiaoyiList = that.jiaoyiList.concat(data);
								}
								that.loading = false;
								that.page++;
							} else {
								that.finished = true;
							}
						}
					}
				);
			},


			// 旧
			//跳转页面
			to(to, query) {
				this.$router.push({
					path: to,
					query: query
				});
			},
			// tab切换
			async getClickFunc(val) {
				if (val == 0) {
					this.symbolsArray = await this.initMyCoinInfo();
					// this.init();
				} else if (val == 1) {
					this.symbolsArray = await this.initMarketInfo();
					// this.init();
				}
			},
			// 获取首页滑动数据
			async initMarketInfo() {
				const result = await new Promise(resolve => {
					$postAxios(api.getMarket, {}, res => {
						if (res.code == 0) {
							let arr = res.data.map(item => {
								let obj = {
									symbol: item.is_ft ? String(item.code).toUpperCase() :
										String(item.EN_name).toLowerCase() + 'usdt',
									title: item.is_ft ? item.EN_name : item.EN_name +
										'/USDT',
									EN_name: item.EN_name,
									bi_id: item.bi_id,
									is_zixuan: item.is_zixuan,
									img: item.img,
									is_ft: item.is_ft
								};
								return obj;
							});
							resolve(arr);
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				});
				return result;
			},
			//  获取我的自选列表
			async initMyCoinInfo() {
				const result = await new Promise(resolve => {
					$postAxios(api.getLikeCoin, {}, res => {
						if (res.code == 0) {
							let arr = res.data.map(item => {
								let obj = {
									symbol: item.is_ft ? String(item.code).toUpperCase() :
										String(item.EN_name).toLowerCase() + 'usdt',
									title: item.is_ft ? item.EN_name : item.EN_name +
										'/USDT',
									EN_name: item.EN_name,
									bi_id: item.bi_id,
									is_zixuan: item.is_zixuan,
									img: item.img,
									is_ft: item.is_ft
								};
								return obj;
							});
							resolve(arr);
						} else {
							this.$toast(this.$t(res.msg));
						}
					});
				});
				return result;
			},
			revData(res) {
				// console.log(res)
				this.futures = res
			}
		}
	};
</script>

<style lang="scss" scoped>
	.contant {
		width: 100%;
		height: 100%;
		position: relative;
		box-sizing: border-box;
		background-color: #21212b;

		.content {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 54px;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;

			.zhanghuTitle {
				width: 100%;
				padding: 10px 15px 5px;
				box-sizing: border-box;
				font-size: 18px;
				font-weight: 600;
				color: #fff;

				span {
					font-size: 15px;
					color: grey;
				}
			}

			.zhanghuInfo {
				width: 95%;
				margin: 0 auto;
				background: url('../../assets/images/newImg/zhanghubg.png') no-repeat 30% 20% / 960px;
				height: 150px;
				padding: 20px 15px;
				border-radius: 15px;
				box-sizing: border-box;

				.zhanghuInfotop {
					display: flex;
					align-items: center;
					position: relative;

					.shuaxin {
						position: absolute;
						font-size: 12px;
						top: 30px;
						right: 70px;
						color: #a5b7d3;
					}

					.eyeBox {
						position: absolute;
						top: -25px;
						right: 0px;
						color: #a5b7d3;

						img {
							width: 13px;
							height: 9px;
						}
					}

					.zhanghuInfoIt {
						width: 42%;
						font-size: 10px;
						font-weight: 700;
						color: #a5b7d3;

						p:last-child {
							font-size: 14px;
							color: #fff;
							margin-top: 5px;
						}
					}

					.zhanghuInfoItii {
						font-size: 10px;
						font-weight: 700;
						color: #a5b7d3;

						p:last-child {
							font-size: 14px;
							color: #fff;
							margin-top: 5px;
						}
					}
				}

				.zhanghuInfotopTow {
					justify-content: space-between;
					margin-top: 40px;
				}
			}

			.navBox {
				width: 93%;
				display: flex;
				margin: 25px auto 0;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.navBoxit {
					width: 33%;
					display: flex;
					align-items: center;
					margin-bottom: 15px;
					color: #fff;
					font-size: 11px;
					font-weight: 600;

					img {
						width: 18px;
						height: 20px;
						margin-right: 10px;
					}
				}

				.navBoxit:nth-child(3),
				.navBoxit:nth-child(6) {
					justify-content: flex-end;
				}

				.navBoxit:nth-child(2),
				.navBoxit:nth-child(5) {
					justify-content: center;
				}
			}

			.navTowBox {
				width: 100%;
				display: flex;
				align-items: center;
				height: 35px;
				justify-content: center;
				font-size: 15px;
				border-bottom: 1px solid #181818;

				.navTowit {
					width: 47%;
					text-align: center;
					color: rgb(130, 128, 149);
				}

				.navTowitTow {
					color: #fff;
				}
			}

			.shujuList {
				.chilanglist {
					padding: 20px 10px;
					box-sizing: border-box;
				
					.onebox {
						padding: 0 10px;
						box-sizing: border-box;
						border-radius: 8px;
						background: #ffffff;
						margin-bottom: 20px;
				
						.time {
							text-align: center;
							color: #588bf7;
							font-size: 16px;
							padding: 20px 0 0;
							font-weight: bold;
						}
				
						.name {
							color: #000;
							font-size: 18px;
							font-weight: 600;
							padding: 10px 0;
						}
				
						.tab {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-bottom: 10px;
				
							.duo {
								padding: 5px 20px;
								box-sizing: border-box;
								background: #1cad90;
								font-size: 12px;
								color: #fff;
								-webkit-border-radius: 500px;
								border-radius: 500px;
							}
				
							.kong {
								padding: 5px 20px;
								box-sizing: border-box;
								background: #cd4e65;
								font-size: 12px;
								color: #fff;
								-webkit-border-radius: 500px;
								border-radius: 500px;
							}
				
							.num {
								font-size: 18px;
								color: #000;
								font-weight: 600;
				
								span {
									font-size: 12px;
								}
							}
						}
				
						.aline {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0px 0 5px;
				
							.linename {
								color: #213e58;
								font-weight: 700;
								font-size: 12px;
							}
				
							.zhang {
								color: #1cad90;
								font-size: 12px;
							}
				
							.kui {
								color: #cd4e65;
								font-size: 12px;
							}
						}
					}
				}
			}
		}
	}
	
</style>